<template>
    <el-table-column
        :label="item.label"
        :align="align"
        :min-width="item.minWidth || minWidth"
        :width="item.width"
        v-bind="item.tableColumnOptions"
        v-if="_show"
    >
        <template slot-scope="scope">
            <template v-for="(value, name) in $slots">
                <slot :name="name"></slot>
            </template>
            <template v-for="(item, name) in $scopedSlots">
                <slot
                    :name="name"
                    :row="scope.row"
                    :[`$index`]="scope.$index"
                ></slot>
            </template>
            <Content
                v-if="
                    !needValid &&
                    item.type !== 'empty' &&
                    getState(item) !== 'hidden'
                "
                v-model="scope.row"
                :FormItem="item"
                :fitContent="'fitContent' in item ? item.fitContent : true"
                :alignContent="align"
                :index="scope.$index"
                :state="state"
                fromType="tableCloumns"
            >
            </Content>
            <FormItem
                v-if="
                    needValid &&
                    item.type !== 'empty' &&
                    getState(item) !== 'hidden'
                "
                v-model="scope.row"
                :FormItem="item"
                label=" "
                :rulesProp="`${dataName}[${scope.$index}].${
                    item.rulesProp || item.prop
                }`"
                :fitContent="'fitContent' in item ? item.fitContent : true"
                :alignContent="align"
                fromType="tableCloumns"
                :index="scope.$index"
                :state="state"
            >
            </FormItem>
        </template>
    </el-table-column>
</template>

<script>
import Content from "@/views/finance/reimburs/content/index.vue";
import FormItem from "@/views/finance/reimburs/formItem";
export default {
    name: "",
    components: { Content, FormItem },
    props: {
        value: {
            required: false,
        },
        cellOptions: {
            type: Object,
            default: {},
        },
        dataName: {
            type: String,
            default: "",
        },
        showOverflowTooltip: {
            default: true,
        },
        state: {
            required: false,
            type: String,
            default: "write",
        },
        formStatus: {
            required: false,
        },
        minWidth: {
            required: false,
            default: "100px",
        },
    },

    computed: {
        infoData: {
            get() {
                return value;
            },
            set(val) {
                this.$emit("input", val);
            },
        },
        item: {
            get() {
                return this.cellOptions ?? {};
            },
            set(val) {
                this.$emit("cellOptions", val);
            },
        },
        rulesProp() {
            if (Reflect.has(this.item, "rules")) {
                return `${this.rulesProp}[]`;
            }
        },
        align() {
            return this.item.align ?? "center";
        },
        formState: {
            get() {
                let state = "write";
                if (Reflect.has(this, "formStatus")) {
                    switch (this?.formStatus?.toString()) {
                        case "0":
                            state = "write";
                            break;
                        case "1":
                            state = "disabled";
                            break;
                        case "2":
                            state = "hidden";
                            break;
                        default:
                            state = this.state;
                            break;
                    }
                } else {
                    state = this.state;
                }
                return state;
            },
        },
        needValid() {
            return Reflect.has(this.item, "rules");
        },
        slots() {
            for (const key in this.$slots) {
                console.log(key);
            }
            return [];
        },
        _show() {
            if ("show" in this.item) {
                return this.item.show;
            }
            return true;
        },
    },
    filters: {
        getSelectLabel(T, row, key) {
            let item = row.find((item) => {
                return item.value === key || item.dictValue === key;
            });
            return item?.label ?? item?.dictLabel ?? "-";
        },
    },
    data() {
        return {};
    },

    mounted() {},

    methods: {
        getState(item) {
            let state = "disabled";
            let show = true;
            if (Reflect.has(item, "show")) {
                if (typeof item.show == "function") {
                    show = item.show();
                } else if (typeof item.show == "boolean") {
                    show = item.show;
                } else {
                    show = !!item.show;
                }
            }
            if (show === false) {
                state = "hidden";
            } else {
                if (typeof item.state == "function") {
                    state = item?.state?.(this.formData);
                } else {
                    state = item?.state ?? this.formState;
                }
            }
            return state;
        },
    },
};
</script>

<style lang="scss" scoped>
.popover {
    overflow: hidden;
    text-overflow: ellipsis;
}
::v-deep .el-input-number {
    .el-input-number__decrease,
    .el-input-number__increase {
        display: none;
    }
    input {
        padding: 5px;
        text-align: left;
    }
}
</style>
